<template>
    <div class="targs">
        <ul>
            <li v-for="targ in targsAll" :key="targ.path" el-icon-iconName="el-icon-circle-close-outline iconfont"
                @click="toTargs(targ.path)">
                <span>{{ targ.title }}</span>
                <i class="el-icon-circle-close btn" @click="delTargs(targ.path)"></i>
            </li>
        </ul>
    </div>
</template>

<script>
import store from '@/store'
import router from '@/router'

export default {
    //name = Vue组件名称
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'targs',
    //Vue组件定义的数据对象
    data() {
        return {
            //存放所有的调用目标对象
            targsAll: new Array()
        }
    },
    //父子通讯参数
    props: {
        routerLink: {
            //接受参数是一个对象
            type: Array,
            //父组件是否必须携带此对象
            required: true
        }
    },
    //函数
    methods: {
        /**
         * 处理调用的目标路由
         */
        handlerTargetRouter() {
            //缓存的数据
            let catchRouters = store.state.targs.routerLinks;

            //添加每次跳转的路由
            this.routerLink.forEach(k => {
                if (!this.containsKey(catchRouters, k) && k.path !== '/home') {
                    catchRouters.push(k);
                }
            });

            //重新缓存数据
            store.commit('targs/setRouterLinks', catchRouters);
            //取出所有路由标签连接
            this.targsAll = catchRouters;
        },

        /**
         * 校验是否包含值
         * @param {数组} arr 
         * @param {要包含的} key 
         */
        containsKey(arr, key) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].path === key.path) {
                    return true;
                }
            }
            return false;
        },

        /**
         * 跳转标签
         */
        toTargs(target) {
            router.push(target);
        },

        /**
         * 删除标签
         */
        delTargs(target) {
            //缓存的数据
            let catchRouters = store.state.targs.routerLinks;

            //记录关闭后下一个跳转的标签
            let goTargs = "/home";

            //临时容器
            let tempList = new Array();

            catchRouters.forEach(x => {
                if (x.path !== target) {
                    goTargs = x.path;
                    tempList.push(x);
                }
            })

            store.commit('targs/setRouterLinks', tempList)
            this.targsAll = tempList;
            router.push(goTargs);
        },
    },
    //初始化执行
    created() {
        this.handlerTargetRouter();
    },
    //计算属性
    computed: {

    },
    //属性监听
    watch: {
        "routerLink": {
            deep: true,
            handler() {
                this.handlerTargetRouter();
            }
        }
    }
}
</script>

<!--
    lang=less  支持less语法  
    scoped     只在当前实例文件生效
-->
<style lang="less" scoped >
.targs {
    width: 90vw;
    padding: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}

ul,
li {
    list-style: none;
}

li {
    display: inline-block;
    border: 0px solid #03503f;
    color: #f3bb03;
    font-size: 14px;
    background: linear-gradient(#439481, #03503f);
    border-radius: 3px;
    margin-right: 10px;
    padding: 5px 8px 5px 8px;
    .hoverShadow();

}

.btn {
    color: #939945;
    margin-left: 8px;
    font-size: 18px;
    vertical-align: bottom;

    &:hover {
        color: #d4e211;
        text-shadow: 0px 0px 28px #d5e407;
        cursor: pointer;
    }
}
</style>
